<template>
  <div class="common-layout">
    <el-container style="height: 100%" direction="vertical">
      <el-header class="header">
        <div class="swich">
          <el-image style="height: 100%;" src="https://lib.csu.edu.cn/images/logo.png"></el-image>
        </div>
        <div>
          <div v-if="!obj.isLogin">
            <el-button type="primary" text class="login" size="large" @click="router.push('/login')">
              登录
            </el-button>
          </div>
          <div v-else>
            <span class="login">
               <el-text class="mx-1" size="large">欢迎您,{{ obj.userinfo.name }},</el-text>
              <el-link
                :underline="false"
                @click="handleLogout"
                type="primary"
                style="font-weight: bold">
                退出
              </el-link>
            </span>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside">
          <el-menu
            :default-active="'/user/index'"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            class="menu"
            :router="true"
            @select="slectItem"
          >
            <el-menu-item index="/user/index">
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/user/book">
              <span>查看馆内藏书</span>
            </el-menu-item>
            <el-menu-item index="/user/borrow">
              <span>查看借阅书籍</span>
            </el-menu-item>
            <el-menu-item index="/user/info">
              <span>个人信息</span>
            </el-menu-item>
             <el-menu-item index="/user/notice">
              <span>查看公告</span>
            </el-menu-item>
            <el-menu-item index="/user/message">
              <span>查看留言</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="padding: 0">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import router from "@/router";
import {reactive,onBeforeMount} from 'vue'
document.title = "用户首页 -- 图书借阅系统";
const obj = reactive({
  isLogin : false,
  userinfo : [{
    id : '',
    name : '',
    authority: ''
  }]
})
const slectItem = (index,indexPath,item,routeResult) =>{
  console.log(`index:${index},indexPath:${indexPath},item:${item},routeResult:${routeResult}`);
  // if(index === '/user/borrow' || index === '/user/info'){
  //   if(!obj.isLogin){
  //     ElMessageBox.alert('您还没有登录，请登录', '提示', {
  //   // if you want to disable its autofocus
  //   // autofocus: false,
  //   confirmButtonText: '去登陆',
  //   callback: (action) => {
  //     router.push('/login')
  //   }
  // })
  //   }
  // }
}
onBeforeMount(() => {
  let data = JSON.parse(sessionStorage.getItem('loginAccount'));
  if(data !== null){
    obj.isLogin = true
    obj.userinfo = data
  }
})

const handleLogout = ()=>{
  window.sessionStorage.removeItem('loginAccount')
  ElMessageBox.alert('成功退出', '提示', {
    type: 'success',
    confirmButtonText: 'OK',
    callback: () => {
      router.push('/login')
    },
  })
}
</script>

<style scoped>
.common-layout {
  height: 100%;
}
.header {
  color: whitesmoke;
  border-bottom:  1px solid #dcdfe6;
  padding: 0;
  margin: 0;
  /* box-shadow: var(--el-box-shadow-dark); */
}
.aside {
  color: whitesmoke;
  background-color: #0a0a0a;
}
.menu {
  height: 100%;
}
.swich{
  height: 55px;
  float: left;
  margin-left: 10px;
}

.login{
  float: right;
  margin-top: 10px;
  margin-right: 50px;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

</style>
